<template>
  <div class="config-panel">
    <h4>{{ title }}</h4>
    <el-form label-position="top">
      <el-form-item label="排版样式">
        <el-radio-group v-model="config.layout">
          <el-radio label="horizontal">横排</el-radio>
          <el-radio label="vertical">竖排</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标题名称">
        <el-input v-model="config.title" placeholder="例如：我的服务" />
      </el-form-item>
      <el-form-item label="菜单设置">
        <!-- 关键修复：v-model 绑定到 config.data -->
        <draggable v-model="config.data" handle=".drag-handle" animation="150">
          <!-- 关键修复：v-for 循环 config.data -->
          <div v-for="(item, index) in config.data" :key="index" class="config-item">
            <i class="el-icon-rank drag-handle"></i>
            <el-form-item label="名称"><el-input v-model="item.name" /></el-form-item>
            <!-- 关键修复：链接对象可能不存在，需要安全访问 -->
            <el-form-item label="链接"><el-input v-model="item.link.path" /></el-form-item>
            <el-form-item label="图标"><image-upload v-model="item.image" /></el-form-item>
            <el-button type="danger" size="mini" @click="removeItem(index)" class="delete-btn" icon="el-icon-delete"
              circle></el-button>
          </div>
        </draggable>
        <el-button type="primary" plain @click="addItem" v-if="!config.data || config.data.length < 10">+
          添加菜单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  import ImageUpload from '@/components/ImageUpload';
  export default {
    name: "MyServiceConfig",
    components: {
      draggable,
      ImageUpload
    },
    props: ['value', 'title'],
    computed: {
      config: {
        get() {
          const configValue = this.value || {};
          // 关键修复：检查和初始化 data 数组
          if (!configValue.data || !Array.isArray(configValue.data)) {
            this.$set(configValue, 'data', []);
          }
          // 确保每个 item 都有 link 对象
          configValue.data.forEach(item => {
            if (!item.link || typeof item.link !== 'object') {
              this.$set(item, 'link', {
                path: ''
              });
            }
          });
          return configValue;
        },
        set(newValue) {
          this.$emit('input', newValue);
        }
      }
    },
    methods: {
      addItem() {
        this.config.data.push({
          name: '新菜单',
          link: {
            path: ''
          }, // 确保 link 是一个对象
          image: '' // 数据库中使用的是 image 字段
        });
      },
      removeItem(index) {
        this.config.data.splice(index, 1);
      }
    }
  }
</script>

<style scoped>
  .config-panel {
    border: 1px solid #f0f0f0;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .config-item {
    position: relative;
    border: 1px dashed #d9d9d9;
    padding: 15px;
    padding-top: 40px;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .drag-handle {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: move;
    font-size: 20px;
    color: #999;
  }

  .delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
  }
</style>
